<!DOCTYPE html>
<html lang="en">

<head>
	<meta charset="UTF-8">
	<title>Title</title>
	<script src="js/jquery.js" type="text/javascript" charset="utf-8"></script>
	<script src="js/public.js"></script>
	<link rel="stylesheet" type="text/css" href="./css/public.css">
	<link rel="stylesheet" type="text/css" href="//at.alicdn.com/t/font_2896317_donuzq8ujgp.css">
	<script src="js/dream-msg.min.js" type="text/javascript" charset="UTF-8"></script>
</head>
<!-- <body class="bg" id="google_translate_element"> -->

<body class="bg">
	<div class="con">
		<div class="main-container animated fadeInDown">
			<div class="header">
				<span class="title">登录</span>
				<span class="title-tips">
					<a href="views/register/student.html">以学生的身份注册</a>
					<span class="tips">或者</span>
					<a href="views/register/teacherregist.html">以老师的身份注册</a>
				</span>
			</div>
			<div class="main-content">
				<div class="main-flex">
					<div class="ipt-flex">
						<span class="txt">账号</span>
						<input class="ipt" type="text" name="" id="email" value="" autocomplete="off"
							required="required" />
					</div>
					<div class="ipt-flex" style="margin-top: 20px;">
						<span class="txt">密码</span>
						<input class="ipt" type="password" name="" id="pwd" value="" autocomplete="off"
							required="required" />
						<a class="forget-pwd">忘记密码?</a>
					</div>
					<div class="check-margin"><input type="checkbox" name="" id="" value="" class="check-box" /><span
							class="check-box-tips">记住我</span></div>
					<div class="btn-submit"><span>登录密码</span></div>
				</div>
			</div>
		</div>
	</div>
</body>

<script type="text/javascript">

	$(function () {

		let h = location.search;

		let invitationcode;

		let istemp = h.split('=');

		if (istemp.length < 2) {

		} else {
			let invitationcode = istemp[1]

			localStorage.setItem('iv', invitationcode)
		}
	})

	$('.forget-pwd').click(function () {


		localStorage.setItem('fuser', $('#email').val())

		window.location.href = './views/forget/forgetpassword.html'
	})

	// 页头生成
	productheader('body', 3);
	// 页尾生成
	productfooter('body', 4);
	// 记住密码
	$(function () {
		if (localStorage.getItem('params')) {
			$(".check-box").prop('checked', true)
			let dataparams = JSON.parse(localStorage.getItem('params'));
			$('#email').val(dataparams.mailbox);
			$('#pwd').val(dataparams.password);
		} else {
			$(".check-box").prop('checked', false);
			$('#email').val("");
			$('#pwd').val("");
		}
	})


	window.onkeydown = function (e) {

		if (e.keyCode == 13) {

			login();

		}
	}

	// 登录
	$('.btn-submit').click(async function () {

		debounce(login, 1500);
	})


	async function login() {
		let username = $('#email').val();
		let password = $('#pwd').val();

		if (phonetest(username) && password) {
			//手机登录
			let params = {
				'phone': username,
				'password': password,
			};

			let res = await ajax('phone_password_login', params, 'POST');
			if (res.code == 200) {
				// 记住密码
				if ($(".check-box").prop('checked')) {
					// 转换格式存储
					let temp = {
						'mailbox': username,
						'password': password,
					}

					localStorage.setItem('params', JSON.stringify(temp));

				} else {
					localStorage.removeItem('params');
				}
				Dreamer.success("登录成功", 2000);
				// window.location.href = './views/teacher/teachers.html'
			} else {
				Dreamer.error("登录失败！", 2000);
			}
		} else if (emailtest(username) && password) {

			//邮箱登录

			let params = {
				'mailbox': username,
				'password': password,
			}
			let res = await ajax('login', params, 'POST');
			if (res && res.msg != '未找到该用户') {
				// 记住密码
				if ($(".check-box").prop('checked')) {

					localStorage.setItem('params', JSON.stringify(params));

				} else {

					localStorage.removeItem('params');

				}

				Dreamer.success("登录成功", 2000);
				localStorage.setItem('information', JSON.stringify(res.data));
				let r = JSON.parse(localStorage.getItem('information'))

				let obj = {

					user_id: (r.id).toString(),
					user_name: r.teachername,
					user_img: r.teacherimg,
				}

				localStorage.setItem('user', JSON.stringify(obj))
				window.location.href = './views/teacher/teachers.html';
				// window.location.href = './views/teachinformationregister/teachclass.html'

			} else {

				Dreamer.error("登录失败！", 2000);

			}
		} else {

			Dreamer.error("登录失败,请检查账号密码是否输入正确！", 2000);
		}
	}
</script>
<style type="text/css">
	h3 {
		margin-top: 6px;
		font-size: 10px;
		color: #BDC3C9;
		margin-bottom: 6px;
	}

	select {
		width: 115px;
		height: 30px;
		border: 1px solid #d5d5d5;
		outline: none;
		border-radius: 6px;
		padding: 0 10px;
	}

	.option:after {
		content: "";
		width: 14px;
		height: 8px;
		background: url(./static/arrow-down.png) no-repeat center;
		/*通过定位将图标放在合适的位置*/
		position: absolute;
		right: 20px;
		top: 41%;
		/*给自定义的图标实现点击下来功能*/
		pointer-events: none;
	}

	.bg {
		background-color: #363542;
		width: 100%;
		height: 100%;
		display: flex;
		flex-direction: column;
		align-items: center;
	}

	.con {
		width: 100%;
		display: flex;
		flex-direction: column;
		justify-content: center;
		align-items: center;
		background-color: rgba(237, 239, 240, 1);
	}

	.header-top {
		width: 100%;
		height: 60px;
		padding: 0 1%;
		box-sizing: border-box;
		display: flex;
		align-items: center;
		justify-content: space-between;
		background-color: #fff;
	}

	.iconsize {
		font-size: 40px;
		color: #DDDddd;
	}

	.content {
		display: flex;
		align-items: center;
		height: 80%;
	}

	.icon {
		width: 120px;
		height: 100%;
		margin-left: 5%;
	}

	.title-bar {
		height: 80%;
		display: flex;
		align-items: center;
	}

	.title-right-bar {
		height: 50%;
		border-left: 1px solid #d5d5d5;
		border-right: 1px solid #d5d5d5;
		margin-left: 15px;
		display: flex;
		align-items: center;
		font-size: 10px;
		color: #3C3C3C;
		position: relative;
	}

	.title-right-bar span {
		padding-left: 16px;
		color: #000000;
	}

	.title-bar span {
		padding: 0 20px;
		white-space: nowrap;
		color: #000000;
	}

	.span-first {
		height: 80%;
		padding: 0 24px;
		border-left: 1px solid #d5d5d5;
		border-right: 1px solid #d5d5d5;
	}

	.main-container {
		width: 40%;
		border-radius: 6rpx;
		border: 1px solid #dddddd;
		margin: 2% 0 3% 0;
		box-shadow: darkgrey 0px 0px 5px 0px
	}

	.header {
		width: 100%;
		background-color: #fff;
		padding: 5px 0 10px 0;
		border-bottom: 1px solid rgba(229, 229, 229, 1);
		text-align: center;
		position: relative;
		border-radius: 6rpx;
	}

	.title {
		font-size: 20px;
		color: #000000;
		font-weight: bold;
	}

	.title-tips {
		position: absolute;
		right: 3%;
		bottom: 15%;
		white-space: nowrap;
	}

	.title-tips a {
		color: rgba(0, 186, 173, 1);
		font-size: 12px;
		text-decoration: none;
		white-space: nowrap;
	}

	.ipt-flex a {
		color: rgba(0, 186, 173, 1);
		font-size: 12px;
		text-decoration: none;
		white-space: nowrap;
	}

	.tips {
		font-size: 12px;
		color: #cecece;
		padding: 0 4px;
	}

	.main-content {
		padding: 80px;
		display: flex;
		justify-content: center;
		align-items: center;
		background-color: #fff;
	}

	.ipt-flex {
		display: flex;
		flex-flow: row nowrap;
		align-items: center;
	}

	.main-flex {
		width: 80%;
		border-radius: 6rpx;
	}

	.txt {
		width: 50px;
		text-align: right;
		white-space: nowrap;
		color: rgba(0, 0, 0, 1);
		font-size: 12px;
	}

	.ipt {
		padding-left: 10px;
		display: inline-block;
		width: 60%;
		height: 30px;
		margin-left: 15px;
		border: 1px solid #B8B8B8;
		box-shadow: #bdbdbd 0px 0px 0px 1px;
		border-radius: 4px;
		outline: none;
	}

	.forget-pwd {
		cursor: pointer;
		position: relative;
		left: 20px;
	}

	.check-margin {
		margin-left: 65px;
		margin-top: 20px;
		display: flex;
		align-items: center;
	}

	.check-box {
		width: 20px;
		height: 16px;
	}

	.check-box-tips {
		white-space: nowrap;
		color: rgba(0, 0, 0, 1);
		font-size: 12px;
	}

	.btn-submit {
		color: #fff;
		width: 62%;
		background-color: rgba(59, 179, 189, 1);
		display: flex;
		justify-content: center;
		align-items: center;
		border-radius: 2px;
		padding: 10px 0;
		margin-top: 20px;
		margin-left: 65px;
		cursor: pointer;
	}

	.head {
		width: 100%;
		padding: 24px 0;
		border-bottom: 1px solid #4C535A;
		display: flex;
		flex-flow: row nowrap;
		padding-right: 10%;
		box-sizing: border-box;
		justify-content: space-between;
	}
</style>

</html>